import React, { Component, PropTypes } from 'react';
import 'styles/expense/up-down.scss';
import { UpArrow, DownArrow } from '../svg-component/index';

class UpDown extends Component {

  static propTypes = {
    handleUtil: PropTypes.func,
    handleDisabled: PropTypes.func
  };

  defaultProps = {
    handleUtil: () => {},
    handleDisabled: () => {}
  };

  switchUtils = [
    {
      key: 'up',
      component: UpArrow,
    },
    {
      key: 'down',
      component: DownArrow,
    }
  ];

  render() {
    return (
      <section className="up-down">
        {
          this.switchUtils.map(item => (
            <div
              className="up-down-comp"
              disabled={this.props.handleDisabled(item.key)}
              onClick={() => this.props.handleUtil(item.key)}
            >
              {React.createElement(item.component)}
            </div>))
        }
      </section>
    );
  }
}


export default UpDown;
